import { Component } from "react";
import style from './index.module.less'
import { Tabs } from 'antd';
import tabsData from "../../untils/tabsData";
import methods from '@/untils/methods.js'
import infoData from '@/untils/blogInfo.js'
import { BlogInfo } from "..";
const { TabPane } = Tabs;
export default class rightBar extends Component {


    render() {
        return (
            <div className={style.container} >
            <div className={style.tabs}>
            <Tabs centered size='large' animated>
                   

                   {
                       tabsData.map(item => {
                         return <TabPane tab={ methods.icon(item.icon)} key={item.key} >
                             <h3 style={{color:'gray'}}>{ item.title}</h3>
                       </TabPane>
                   })
                   }
                 
               </Tabs>
                </div>
                <div >
                    {
                        infoData.map(item => {
                            return (
                                <BlogInfo title={item.title} icon={item.icon} key={item.key}></BlogInfo>
                            )
                        })
                    }
                </div>
            </div>
        )
    }
}